<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/Global.css" />
    <link rel="stylesheet" href="css/style2.css" />
    <title>办件流程</title>
</head>

<body>
    <div class="bg-white" style="padding:1rem 2rem;">
        <div class="">
            <div class="f40 fw8 tc text-red">办件进度查询</div>
            <p class="tc f14">温馨提示：您需要同时输入身份证号与手机号才可以查询！</p>
        </div>
    </div>
    <div class="bg-grey">
        <div class="jindu ">
            <form class="form">
                <div class="rel mb-10">
                    <label>身份证号</label>
                    <input type="text" placeholder="请输入身份证号(必填)" class="input" id="card2" required autofocus max="10"
                        onblur="blurCard()">
                    <p class="alert abs tr w100">身份证号不能为空！</p>
                </div>
                <div class="rel mb-10">
                    <label>手机号</label>
                    <input type="text" placeholder="请输入手机号(必填)" readonly class="input phone" id="phone" required>
                    <p class="alert abs tr">手机号不能为空！</p>
                </div>
                <div class="rel mb-10">
                    <label>验证码</label>
                    <input type="text" placeholder="验证码" class="input phone" id="code" required>
                    <a href="##" class="getCode" id="getCode" onclick="getCheckCode()">获取验证码</a>
                    <a href="##" class="resetCode" id="resetCode"><span id="second">60</span>秒后重发</a>
                    <p class="alert abs tr">验证码不能为空！</p>
                </div>
                <input type="button" class="btn" value="查询" onclick="query()">
            </form>
            <div class="datalist">
                <ul id="process" class="bg-white py-30" style="display: none;">
                </ul>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/request.js"></script>
    <script src="js/all.js"></script>
    <script>
        var wxUrl = baseUrl();
        var processArr = [],idcard,phone,code
        //身份证失焦
        function blurCard() {
            idcard = $("#card2").val()
            console.log(idcard, 'idcard')
            //判断身份证号
            if (idcard && idcard.length == 18) {
                //根据身份证号获取手机号
                getCustomerPhone({idcard: idcard})
            } else if (idcard && idcard.length !== 18) {
                showMessage('请输入正确的身份证号码！',0)
                $('#phone').val('')
                $('#code').val('')
            } else {
                showMessage('请输入身份证号码！',0)
                $('#phone').val('')
                $('#code').val('')
            }
        }
        $('#phone').click(function(){
            showMessage('填完身份证号可带出相关手机号，不可手动输入!',0)
        })
        //根据身份证号获取手机号
        function getCustomerPhone(data){
            var url = wxUrl + 'custom/getCustomMetaTelephoneList'
            wxAjax(url, "post", data, function (res) {
                console.log(res, '请求成功'); //请求成功
                if (res.code == 200) {
                    var result = res.data
                    if (result.length) {
                        $('#phone').val(result[0].telephone)
                        phone = result[0].telephone
                    } else {
                        showMessage('暂无您的办理信息！',0)
                        $('#phone').val('')
                    }
                }
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        //倒计时
    function resetCode() {
        $('#getCode').hide();
        $('#second').html('59');
        $('#resetCode').show();
        var second = 59;
        var timer = null;
        timer = setInterval(function() {
            second -= 1;
            if (second > 0) {
                $('#second').html(second);
            } else {
                clearInterval(timer);
                $('#getCode').show();
                $('#resetCode').hide();
            }
        }, 1000);
    }
        //获取验证码
        function getCheckCode(){
            var phoneNumber = $('#phone').val()
           if(!phoneNumber){
               //$('#phone').siblings('.alert').html('请输入手机号码').show();
               showMessage('请输入手机号码',0)
               return;
            }
            var data = {
               phoneNumber:phoneNumber
             }
             var url = wxUrl + 'SMSApi/SendVerificationCode'
            wxAjax(url, "post", data, function (res) {
                if (res.code !== 200) {
                    showMessage(res.code.msg,0)
                }
                resetCode()
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        //绑定身份证号并查询
        function query(){
            code = $('#code').val()
            var data = {
                idCardNumber: idcard,
                phoneNumber: phone,
                verificationCode: code
            }
            var url = wxUrl + 'JfCustomer/BindCusomerIDCard_VerificationCode'
            wxAjax(url, "post", data, function (res) {
                if (res.code == 200) {
                    getBusinessNumber({ identity: idcard })
                }else{
                    showMessage(res.code.msg,0)
                }
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        /**
         * 根据身份证获取业务单号
        */
        function getBusinessNumber(data) {
            var url = wxUrl + 'freeListing/getMetaFollowList'
            wxAjax(url, "post", data, function (res) {
                console.log(res, '请求成功'); //请求成功
                if (res.code == 200) {
                    var resultList = res.data
                    if (resultList.length) {
                        this.findProcessTypeByHid(resultList[0].hid);
                    }
                }
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        //根据房源编号判断 流程类型
        function findProcessTypeByHid(hid) {
            var data = {
                Hid: hid
            }
            var url = wxUrl + 'freeListing/findProcessTypeByHid'
            wxAjax(url, "get", data, function (res) {
                var processType = res.data
                if (res.code == 200) {
                    if (processType == 'QueryOne') {
                        this.QueryOne(hid)//免挂牌流程
                    } else if (processType == 'NonLoanProcess') {
                        this.NonLoanProcess(hid)//一次性企产流程
                    } else if (processType == 'SelfManagedAssets') {
                        this.SelfManagedAssets(hid)//单位自管产委托贷款协议流程
                    } else if (processType == 'charityLoanProcess') {
                        this.charityLoanProcess(hid)//查询企业置换（公易贷）流程
                    } else {
                        this.getProcess(hid)
                    }
                }
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        function NonLoanProcess(hid){
            var data = {
                Hid: hid
            }
            var url = wxUrl + 'freeListing/NonLoanProcess'
            wxAjax(url, "get", data, function (res) {
                var results = res.data
                var result = results.filter(val => val)
                if (res.code == 200) {
                    if(results && results.length){
                        result.forEach((val, i) => {
                            val.isFold = false;
                            var div = pinSelect(val)
                            $('#process').css('display','block')
                            $('#process').append(div)
                        })
                    }
                }
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        function QueryOne(hid){
            var data = {
                Hid: hid
            }
            var url = wxUrl + 'freeListing/QueryOne'
            wxAjax(url, "get", data, function (res) {
                var results = res.data
                var result = results.filter(val => val)
                if (res.code == 200) {
                    if(results && results.length){
                        result.forEach((val, i) => {
                            val.isFold = false;
                            var div = pinSelect(val)
                            $('#process').css('display','block')
                            $('#process').append(div)
                        })
                    }
                }
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        function SelfManagedAssets(hid){
            var data = {
                Hid: hid
            }
            var url = wxUrl + 'freeListing/SelfManagedAssets'
            wxAjax(url, "get", data, function (res) {
                var results = res.data
                var result = results.filter(val => val)
                if (res.code == 200) {
                    if(results && results.length){
                        result.forEach((val, i) => {
                            val.isFold = false;
                            var div = pinSelect(val)
                            $('#process').css('display','block')
                            $('#process').append(div)
                        })
                    }
                }
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        function charityLoanProcess(hid){
            var data = {
                Hid: hid
            }
            var url = wxUrl + 'freeListing/charityLoanProcess'
            wxAjax(url, "get", data, function (res) {
                var results = res.data
                var result = results.filter(val => val)
                if (res.code == 200) {
                    if(results && results.length){
                        result.forEach((val, i) => {
                            val.isFold = false;
                            var div = pinSelect(val)
                            $('#process').css('display','block')
                            $('#process').append(div)
                        })
                    }
                }
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        function getProcess(hid){
            var data = {
                hid: hid
            }
            var url = wxUrl + 'freeListing/getShowFollowList'
            wxAjax(url, "get", data, function (res) {
                var results = res.data
                var result = results.filter(val => val)
                if (res.code == 200) {
                    if(results && results.length){
                        result.forEach((val, i) => {
                            val.isFold = false;
                            var div = pinSelect(val)
                            $('#process').css('display','block')
                            $('#process').append(div)
                        })
                    }
                }
            }, function (res) {
                console.log(res); //请求失败
            })
        }
        function pinSelect(item){
            if(item.remark && (item.remark.indexOf('!@#')!= -1)){
                item.remark = item.remark.replaceAll('!@#','<br/>')
            }
            var div = '<li class="' + (item.begDate ? 'active':'') +'">'
                      +'<span class="times">'+(item.stepDate ? item.stepDate :'')+'</span>'
                      +'<h5>'+item.stepName+'</h5>'+ 
                      (item.remark ? '<p class="warning warning2">'+item.remark+'</p>' : '')
                      +'</li>'
            return div
        }
    </script>
</body>

</html>